{extend name="default:layout:base" /}

{block name="main"}
<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
        {volist name="types" id="vo"}
        <li {if $type === $key }class="layui-this" {/if}>
        <a href="{:url('welcome', ['type' => $key])}">{$vo}</a>
        </li>
        {/volist}
    </ul>
    <div class="layui-tab-content" style="margin-top: 10px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-row layui-col-space10">
                {volist name="data_list" id="item"}
                <div class="layui-col-xs3 layui-col-lg2">
                    <div class="item {if $current_app && $current_app.id == $item.id}active{/if}" data-href="{:url('switch',['id' => $item.id,'type' => $type])}">
                        <div class="item-head">
                            <i class="fa fa-sign-in"></i>
                        </div>
                        <div class="cover" style="background-image: url('{$item.cover}')"></div>
                        <div class="item-footer">
                            <div class="layui-row">
                                <div class="layui-col-xs4">
                                    <div class="icon">
                                        <img src="{$logo}" alt="logo">
                                    </div>
                                </div>
                                <div class="layui-col-xs8">
                                    <p class="title">{$item.title}</p>
                                    <p class="type">{$item.subtitle}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['element', 'jquery'], function(){
        var element = layui.element,
        $ = layui.jquery;
        $('.item').on('click', function () {
            location.href = $(this).data('href');
        });
    });
</script>
{/block}

{block name="css"}
<style>
    .item{background-color: #f4f4f4;cursor: pointer;border: 1px solid #f4f4f4;}
    .item.active{border: 1px solid #1e9fff;}
    .item-head{text-align: right;padding-right: 15px;padding-top: 10px;font-size: 20px;}
    .item-footer{padding-bottom: 20px;}
    .item-footer .icon{
        text-align: right;
        padding-right: 10px;
        padding-top: 10px;
        margin-right: 8px;
        border-right: 1px solid #e5e5e5;
    }
    .item-footer .icon img{
        width: 30px;
    }
    .item-footer .title{color: #4c4c4c;}
    .item-footer .type{color: #999;}
    .cover{
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin: 10px auto 20px;
        height: 100px;
    }
</style>
{/block}